<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<div data-role="page" >
	<div data-role="header" data-position="fixed">
		<h1><s:text name="global.application.title" /></h1>
		<a href="#nav-panel" data-icon="bars"><s:text name="master.menu" /></a>

		<s:url var="signOutUrl" action="signOut" namespace="/" />
		<s:a href="%{#signOutUrl}" id="signout" class="ui-btn-right" title="%{#session.SESSION_USER.username}" data-ajax="false">
			<s:text name="global.user.signout" />
		</s:a>		
		
		<div data-role="navbar" data-iconpos="left">
	        <ul>
	        	<li style="width:35%;">
	        		<a 	href="#popupSelectUser" 
	        			data-rel="popup" 
	        			data-position-to="window" 
	        			data-role="button" 
	        			data-inline="true" 
	        			data-theme="a" 
	        			data-transition="slidedown">
	        			<s:property value="%{#session.CURRENT_PATIENT.userName}"/> <s:text name="master.MrMrs" />
	        		</a>
	        	</li>
	            <li style="width:45%;">
	            	<a 	href="#popupSetDate" 
	            		data-rel="popup" 
	            		data-position-to="window" 
	            		data-role="button" 
	            		data-inline="true" 
	            		data-theme="a" 
	            		data-transition="slidedown">
	            		<span id=implementationdate><s:property value="%{#session.IMPLEMENTATION_DATE.jaDate}"/></span>
	            	</a>
	            </li>
	            <li style="width:20%;">
	            	<s:url action="view" namespace="/home" var="homeUrl" />
					<s:a href="%{#homeUrl}" data-icon="home" data-ajax="false">
						<s:text	name="global.return.home" />
					</s:a>
				</li>
	        </ul>
	    </div><!-- /navbar -->
	</div><!-- /header -->

	<div data-role="popup" id="popupSetDate" data-theme="a" class="ui-corner-all" data-overlay-theme="a">
		<a href="#" id="closeselectdate" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>   
		<div id="impldateformdiv" style="padding:10px 20px;">
			<s:form style="margin-bottom:0px;" action="saveimpldate" namespace="/home">
				<h3><s:text	name="master.implementation.date" /></h3>
				<input type="text" id="datepicker" name="implDate" style="cursor: pointer; background-color: #F4F4F4;" onclick="closeWidget(closeselectdate)">
				<button class="btn btn-custom" onclick="setToday()"
					style="-webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;"
					type="button">
					<s:text name="titlehead.settoday" />
				</button>
			</s:form>
			<s:hidden name="prevDateHidden" id="prevDate" />
		</div>
	</div>

	<div data-role="popup" id="popupSelectUser" data-theme="a" class="ui-corner-all"  data-overlay-theme="a">
		<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
		<div id="Selectuserformdiv" style="padding:10px 20px;">
			<s:form class="form-inline" style="margin-bottom:0px;" action="searchClient" namespace="/selectClient">
				<h3><s:text name="master.usermenu.userselection" /></h3>
				<fieldset class="ui-grid-a">					
					<div class="ui-block-a" style="width:75%">
						<input type="text" id="txtSearchClient"	name="searchClient.userName" value='<s:property value="%{#session.CURRENT_PATIENT.userName}"/>'>
					</div>
					<div class="ui-block-b" style="width:25%">
						<div style="margin-left:10px; margin-top: 18px;">
							<s:text name="master.MrMrs" />
						</div>
					</div>			
					</fieldset>
				<button class="btn btn-custom" type="submit" name="isBtnClick" value='true'>
					<s:text name="master.usermenu.userselection" />
				</button>
			</s:form>
		</div>
	</div>
	
	<div data-role="panel" data-position-fixed="true" data-theme="a" id="nav-panel">
		<div id="demo-borders">
		
			<div data-role="collapsible" data-theme="f" data-content-theme="d" data-inset="false">
				<h3><s:text name="master.usermenu" /></h3>
				<ul data-role="listview">
					<li>
						<s:url action="view" namespace="/selectClient" var="selectUrl" />
						<s:a href="%{#selectUrl}" data-ajax="false">
							<s:text name="master.usermenu.userselection" />
						</s:a>
					</li>
				</ul>
			</div><!-- /collapsible -->
			
			<div data-role="collapsible" data-theme="f" data-content-theme="d"	data-inset="false">
				<h3><s:text name="master.recordmenu" /></h3>
				<ul data-role="listview">
					<s:iterator var="counter" begin="0" end="17" status="rowIndex">
						<li class="checkselectclient">
							<s:url action="menuview" namespace="/input" var="inputUrl">
								<s:param name="refid" value='#rowIndex.index' />
							</s:url> 
							<s:a href="%{#inputUrl}" data-ajax="false">
								<s:property	value="getText('master.recordmenu.' + #rowIndex.index)" />
							</s:a>
						</li>
						<s:if test="%{#rowIndex.index == 0 || #rowIndex.index == 1 || #rowIndex.index == 7 
							|| #rowIndex.index == 8 || #rowIndex.index == 9 || #rowIndex.index == 11 
							|| #rowIndex.index == 12 || #rowIndex.index == 13 || #rowIndex.index == 14 
							|| #rowIndex.index == 15 || #rowIndex.index == 16}">
							<li data-role="list-divider" />
						</s:if>
					</s:iterator>
				</ul>
			</div><!-- /collapsible -->

			<div data-role="collapsible" data-theme="f" data-content-theme="d"	data-inset="false">
				<h3><s:text name="master.endmenu" /></h3>
				<ul data-role="listview">
					<li>
						<a href="#"><s:text name="master.endmenu" /></a>
					</li>
					<li data-role="list-divider" />
					<li>
						<s:url action="signOut" namespace="/" var="signOutUrl" />
						<s:a href="%{#signOutUrl}" data-ajax="false">
							<s:text name="master.endmenu.signout" />
						</s:a>
					</li>
				</ul>
			</div><!-- /collapsible -->
			
			<ul data-role="listview" data-inset="true" data-theme="f">
				<li>
					<s:url action="view" namespace="/selectClient" var="selectUrl" />
						<s:a href="%{#selectUrl}" data-ajax="false">
							<s:text name="Home.SelectCLient" />
						</s:a>
				</li>
			</ul>
			
			<ul data-role="listview" data-inset="true" data-theme="f">
				<li class="checkselectclient">
					<s:url action="view" namespace="/input" var="inputUrl" />
						<s:a href="%{#inputUrl}" data-ajax="false">
							<s:text name="Home.ContinueRecord" />
						</s:a>
				</li>
			</ul>
			
			<ul data-role="listview" data-inset="true" data-theme="f">
				<li class="checkselectclient">
					<s:url action="view" namespace="/weekData" var="weekUrl" />
						<s:a href="%{#weekUrl}" data-ajax="false">
							<s:text name="Home.ShowRecord" />
						</s:a>
				</li>
			</ul>
			
			<ul data-role="listview" data-inset="true" data-theme="f">
				<li class="checkselectclient">
					<s:url action="viewVital" namespace="/input" var="newvitalUrl" /> 
						<s:a href="%{#newvitalUrl}" data-ajax="false">
							<s:text name="master.vitaldata" />
						</s:a>
				</li>
			</ul>
			
		</div>
	</div><!-- /panel -->
	
	<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
	    <div data-role="header" data-theme="e" class="ui-corner-top">
	        <h3><s:text name='global.message.select.client'/></h3>
	    </div>
	    <div data-role="content" data-theme="c" class="ui-corner-bottom ui-content">
	        <h3 class="ui-title"><s:text name='global.message.select.client.body'/></h3>
	        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="e" onclick="focusselectClient()">OK</a>
	    </div>
	</div>

<script type="text/javascript">

	$(document).ready(function() {
		$('.checkselectclient').click(function(event) {
			var selectedClient = '<s:property value="%{#session.CURRENT_PATIENT.hcsID}"/>';
	
			if (selectedClient == "" || selectedClient == null) {
				event.preventDefault();
				$("#popupDialog").popup('open');
				}
		});

		var frm = $('#impldateformdiv').find('form');		
		var prevdate = $('#datepicker').val();
		$("input[id=prevDate]").val(prevdate);
		
	 	$('#datepicker').change(function () {
		 	var prevValue = $('#prevDate').val();
		 	var newValue = $('#datepicker').val();
		 	if(newValue.length && prevValue != newValue){		 	
		 		$("input[id=prevDate]").val(newValue);		 		
		 		$.ajax({
					type : frm.attr('method'),
					url : frm.attr('action'),
					data : frm.serialize(),
					async : false,
					success : function(response) {
					},
					error : function(err) {
					 alert("ImplementationDate Error :" + err);
					}
				});
				document.getElementById('implementationdate').innerHTML= newValue;
			}			
	 	});

	});

	$(function() {
		var date = { preset : 'date', maxDate : new Date() };

		$("#datepicker").show();
		$('#datepicker').val('').scroller('destroy')
				.scroller($.extend(date, {
					theme : 'sense-ui',
					mode : 'scroller',
					display : 'modal',
					lang : 'ja'
				}));

		$('#datepicker').trigger('change');
		$('#datepicker').val('<s:property value="%{#session.IMPLEMENTATION_DATE.jaDate}"/>');
	});

	(function($) {
		$.mobiscroll.i18n.ja = $.extend($.mobiscroll.i18n.ja,
			{
				// Core
				setText : 'セット',
				cancelText : 'キャンセル',
				// Datetime component
				dateFormat : 'yy年mm月dd日DD',
				dateOrder : 'yymmdd',
				dayNames : [ '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日' ],
				dayNamesShort : [ '日', '月', '火', '水', '木', '金', '土' ],
				dayText : '日',
				hourText : '時',
				minuteText : '分',
				monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
				monthNamesShort : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',	'10月', '11月', '12月' ],
				monthText : '月',
				secText : '秒',
				timeFormat : 'HH:ii',
				timeWheels : 'HHii',
				yearText : '年',
				nowText : '今',
				// Calendar component
				dateText : '日付',
				timeText : '時間',
				calendarText : 'カレンダー',
				// Measurement components
				wholeText : '全数',
				fractionText : '分数',
				unitText : '単位',
				// Time / Timespan component
				labels : [ '年間', '月間', '日間', '時間', '分', '秒', '' ],
				labelsShort : [ '年間', '月間', '日間', '時間', '分', '秒', '' ],
				// Timer component
				startText : '開始',
				stopText : '停止',
				resetText : 'リセット',
				lapText : 'ラップ',
				hideText : '隠す'
			});
	})(jQuery);
	
	 $("#signout").addClass('ui-btn-right');
	 
	 	function focusselectClient(){
		$('.homeli').removeClass('ui-btn-active');
		$('#selectclient').addClass('ui-focus');	
	}
	
	function setToday(){	
		var date = new Date();	
		$("#datepicker").scroller('setDate', date, true, 0);
		closeWidget(closeselectdate);
	}
	
	 function closeWidget(id){
	 	$(id).click();
	 };
</script>